<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <style type="text/css">
    /*CSS源代码*/
    @import url('http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css');
    body {
    background: url('./img/bg1.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    color:#fff;
    background-color:#333;
    font-family: 'microsoft yahei' ,Arial,sans-serif;
    }
    /* bootstrap 3 helpers */
    .navbar-form input, .form-inline input {
    width:auto;
    }
    header {
    height:480px;
    }
    #nav.affix {
    position: fixed;
    top: 0;
    width: 100%;
    z-index:10;
    }
    #sidebar.affix-top {
    position: static;
    }
    #sidebar.affix {
    position: fixed;
    top: 180px;
    }
    a:link, a:visited {
    color:#eee;
    }
    .block {
    background-color:rgba(0,0,0,0.2);
    height:370px;
    padding-left:12px;
    padding-right:12px;
    }
    .block-sm {
    height:180px;
    }
    .btn-flat {
    border-radius:0px;
    border-width:0;
    background-image:none;
    padding:16px;
    margin:0 auto;
    margin-top:15px;
    width:70%;
    font-size:20pt;
    }
    /* mini carousel */
    .carousel-inner img {
    width:100%;
    height:100%;
    }
    #myCarousel {
    font-size:90%;
    }
    .carousel-controls-mini {
    margin-left:42%;
    }
    .carousel-controls-mini > a {
    border:1px solid #eee;
    margin:1px;
    width:20px;
    display:block;
    float:left;
    text-align:center;
    }
    #carousel-bounding-box {
    margin:0 auto;
    width:300px;
    }
    </style>
   <!-- jquery  -->
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.js"></script>
  </head>
  <body>
    
    <header class="masthead">
      <div class="container">
        <div class="row">
          <div class="col-sm-6">
            <h1><a href="#" title="scroll down for your viewing pleasure">Bootstrap 3 模板</a><p class="lead">全屏背景图片主题</p></h1>
          </div>
          <div class="col-sm-6">
            <div class="pull-right hidden-sm">
              <h1><a href="#"><i class="glyphicon glyphicon-user"></i> <i class="glyphicon glyphicon-chevron-down"></i></a></h1>
            </div>
          </div>
        </div>
      </div>
    </header>
    <!-- Begin Navbar -->
    <div id="nav">
      <div class="navbar navbar-default navbar-static">
        <div class="container">
          <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
          <a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="glyphicon glyphicon-bar"></span>
            <span class="glyphicon glyphicon-bar"></span>
            <span class="glyphicon glyphicon-bar"></span>
          </a>
          <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
              <li class="active"><a href="#">Home</a></li>
              <li class="divider"></li>
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
            </ul>
            <ul class="nav pull-right navbar-nav">
              <li>
                <form class="navbar-form">
                  <input class="form-control" placeholder="Search" type="text">
                  <button type="submit" class="btn btn-default"><i class="glyphicon glyphicon-search"></i></button>
                </form>
              </li>
              <li>
                <a href="#"><i class="glyphicon glyphicon-flag"></i> <span class="badge">5</span></a>
              </li>
            </ul>
          </div>
        </div>
        </div><!-- /.navbar -->
      </div>
      <div class="container">
        <br>
        <div class="row-fluid">
          <div class="span10 offsetHalf">
            
            <i class="icon-screenshot icon-5x" style="color:#ee1111;"></i>
          </div>
        </div>
        <br><br><br>
        <div class="row-fluid">
          <h1 class="pull-center"><strong>BOOTSTRAP</strong></h1>
          <p class="lead pull-center">单页面模板</p>
        </div>
        <br><br><br><br>
        <div class="row-fluid">
          
          <div class="span5 offsetHalf block">
            <div class="pull-center">
              <h1>响应式设计</h1>
              ... <br>
              <h1><i class="icon-beaker icon-4x"></i></h1>
              <button class="btn btn-primary btn-flat">立刻了解<i class="pull-right icon-chevron-right icon-large"></i></button>
            </div>
          </div>
          <div class="span5 block">
            <div class="pull-center">
              <h1>2015设计</h1>
              ...<br>
              <h1><i class="icon-fire icon-4x"></i></h1>
              <button class="btn btn-primary btn-flat">立刻了解<i class="pull-right icon-chevron-right icon-large"></i></button>
            </div>
          </div>
          
        </div>
        <br><br><br>
        <div class="row-fluid">
          <h3 class="pull-center">特性</h3>
        </div>
        <br><br>
        <div class="row-fluid">
          <div class="span12">
            <div class="span3 block block-sm offsetHalf1">
              <h2>开发</h2>
              this is a test
            </div>
            <div class="span3 block block-sm">
              <h2>设计</h2>
              this is a test
            </div>
            <div class="span3 block block-sm">
              <h2>社区</h2>
              this is test
            </div>
          </div>
        </div>
        </div><!---/cont-->
        <br><br>
        <h4 class="text-center">迷你幻灯</h4>
        <br><br>
        <div class="container">
          <!-- Slider -->
          <div class="row-fluid">
            <div class="span9 offsetHalf1" id="slider">
              <!-- Top part of the slider -->
              <div class="row-fluid">
                <div id="carousel-bounding-box">
                  <div id="myCarousel" class="carousel slide">
                    <!-- Carousel items -->
                  <div class="carousel-inner">
                      <div class="active item" data-slide-number="0"><img class="img-rounded" src="./img/1.jpg"></div>
                      <div class="item" data-slide-number="1"><img class="img-rounded" src="./img/2.jpg"></div>
                      <div class="item" data-slide-number="2"><img class="img-rounded" src="./img/1.jpg"></div>
                  </div>
                    
                  </div>
                  
                  <!-- Carousel nav -->
                  <div class="carousel-controls-mini">
                    <a href="#myCarousel" data-slide="prev">‹</a>
                    <a href="#myCarousel" data-slide="next">›</a>
                  </div>
                  
                </div>
                
                <div class="span4" id="carousel-text"></div>
                
                
                <div style="display:none;" id="slide-content">
                  <div id="slide-content-0">
                    <h5>Slide One</h5>
                    <p>This is mini slider / carousel with Bootstrap. Blah blah, blah, blah blah. Lorem dolor?</p>
                    <small>October 13 2013 - <a href="#">Read more</a></small>
                  </div>
                  <div id="slide-content-1">
                    <h5>Slide Two</h5>
                    <p>Mini carousel with Bootstrap</p>
                    <small>October 15 2013 - <a href="#">Read more</a></small>
                  </div>
                  <div id="slide-content-2">
                    <h5>Slider Three</h5>
                    <p>Facebook-style paged image slider</p>
                    <small>October 19 2013 - <a href="#">Read more</a></small>
                  </div>
                  <div id="slide-content-3">
                    <h5>Slider Four</h5>
                    <p>Lorem Ipsum Dolor</p>
                    <small>October 22 2013 - <a href="#">Read more</a></small>
                  </div>
                  <div id="slide-content-4">
                    <h5>Slider Five</h5>
                    <p>Lorem Ipsum Dolor</p>
                    <small>October 25 2013 - <a href="#">Read more</a></small>
                  </div>
                  <div id="slide-content-5">
                    <h5>Slider Six</h5>
                    <p>Lorem Ipsum Dolor</p>
                    <p class="sub-text">October 24 2012 - <a href="#">Read more</a></p>
                  </div>
                  á
                </div>
                
                
                
              </div>
              
            </div>
            </div> <!--/Slider-->
            
            <br>
            <br>
            <br>
            
            <div class="row-fluid text-center">
              
              <a href="#" title="Bootstrap playground">this is a test</a>
              
            </div>
            <br><br>
          </div>
          <script type="text/javascript">
          /*Javascript代码片段*/
          $('#nav').affix({
          offset: {
          top: $('header').height()
          }
          });
          $('#sidebar').affix({
          offset: {
          top: 1500
          }
          });
          </script>
        </body>
</html>